<template>
	<view v-show="cartListData.length > 0">
		<geiaddress></geiaddress>
		<view class="cart_centerbox">
			<view class="lang_icon">
				<image src="https://s1.chu0.com/src/img/png/10/107a3a23a1e64a69a4910cad3567ed96.png?imageMogr2/auto-orient/thumbnail/!234x44r/gravity/Center/crop/234x44/quality/85/&e=1735488000&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:RUsc1Sh0X-o78kxXfp3XuVmAhZs=" ></image>
				
			</view>
			<view class="cart_centerbox_main">
				<uni-icons type="shop" size="35rpx" class="cart_centerbox_main_icon"></uni-icons>
				购物车
			</view>
		</view>
	</view>
	<view class="nething" v-show="cartListData.length == 0">
		<image src="https://s1.chu0.com/pvimg/img/png/9a/9ad5ec365db64069bc82fc1868b1749b.png?imageMogr2/auto-orient/thumbnail/!201x201r/gravity/Center/crop/201x201/quality/85/&e=1735488000&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:ozdjxVEkVn1NV7wPSDCxBzD72jQ=" style="height: 200rpx;width: 200rpx;margin-bottom: 20rpx;"></image>
		购物车里面空空如也...
	</view>
	<uni-swipe-action>
		<uni-swipe-action-item v-for="item,index in cartListData" :key='index'>
			<view class="cart_main" >
				
				<view class="cart_main_checked" style="display: flex;align-items: center;justify-content: center;">
					<checkbox value="cb" :checked="item.isChack" @click="changAttrChacked(index)"/>
				</view>
				<view class="cart_main_img" style="display: flex;justify-content: center;align-items: center;">
					<image :src="item.goods_small_logo" style="width: 80%;height: 80%;"></image>
				</view>
				<view class="cart_main_context">
					<text class="cart_main_context_topper">
						{{item.goods_name}}
					</text>
					<view class="cart_main_context_bottom">
						<text>￥{{item.goods_price}}.00</text>
						<view class="cart_main_context_bottom_number">
							<view class="cart_num" @click="addCarSomeNam(index,-1)">
								-
							</view>
							<input type="text" v-model="numArr[index].goods_count" class="cart_num_input"  @input="addCarSomeNam(index,undefinde,$event.target.value)"/>
							
							<view class="cart_num"  @click="addCarSomeNam(index,1)">
								+
							</view>
						</view>
					</view>
				</view>
			</view>
			<template v-slot:right>
					<view style="width: 200rpx;display: flex;align-items: center;justify-content: center;background-color: #DD524D;color: white;" @click="clearSomeAttr(index)">删除</view>
				</template>
		</uni-swipe-action-item>
	</uni-swipe-action>
	<view class="btm_bar" :style="{width:width + 'px'}">
		<view class="btm_bar_left">
			<checkbox value="cb" :checked="sumChacked" style="margin-left: 10rpx;" @click="checkedAll"/>
			全选
		</view>
		<view class="btm_bar_center">
			合计:<text>￥{{sumPirce}}.00</text>
		</view>
		<view class="btm_bar_rgiht" @click="settlementCart(sumNumAttr,isLoing,haveAddress)">
			结算({{sumNumAttr}})
		</view>
	</view>
</template>

<script>
	import {cloneDeep} from "lodash";
	import {mapState,mapMutations,useStore,mapGetters } from 'vuex'
	import {
		defineComponent,
		defineAsyncComponent,
		ref,
		reactive,
		toRefs,
		watch,
		computed,
		inject,
		onMounted,
		toRaw
		
	} from 'vue'
	import {
		onReachBottom,
		onShow,
		onLoad,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import geiaddress from '../../components/geiaddress/geiaddress.vue'
	export default defineComponent({
		name:'Cart',
		components:{
			geiaddress
		},
		computed:{
			...mapGetters(['sumPirce','sumNumAttr','isLoing','haveAddress'])
		},
		setup(){
			let timer = 'timer'
			let numArr = ref([])
			const store = useStore()
			const sumChacked = computed(()=>store.state.shoppingCar.every(item=>item.isChack)|| false)
			function changAttrChacked(index){
				if(typeof index =='number' && String(index) !== 'NaN'){
					store.commit('changAttrStatus',parseInt(index))
				}
			}
			function checkedAll(){
				store.commit('checkedAll')
			}
			function clearSomeAttr(index){
				typeof index === 'number' ? store.commit('cleanShoppingCar',{index}) : ''
			}
			function addCarSomeNam(index,num,value){
				if(typeof num !== 'undefined'){
					store.commit('addMannyAttrSum',{index,num})
				}else{
					clearTimeout(timer)
					timer = setTimeout(()=>{
						if(!isNaN(parseInt(value))&&value > 0){
							store.commit('addMannyAttrSum',{index,num,value})
						}else{
							numArr.value = cloneDeep(store.state.shoppingCar)
						}
					},500)
				}
			}
			function settlementCart(q,w,e){
				if(!q)return uni.showToast({
					title:'请确保有一个商品选中',
					icon:'none'
				})
				if(!w)return uni.showToast({
					title:'请确保登录状态是被肯定的',
					icon:'none'
				})
				if(!e)return uni.showToast({
					title:'请确保地址已被选中',
					icon:'none'
				})
				uni.showModal({
					content:'确定结算吗',
					success: (res) => {
						if(res.confirm){
							uni.showToast({
								title:'付款成功',
								icon:'none'
							})
						store.commit('cleanShoppingCar',{index:999,all:true})	
						}
					}
				})
			}
			watch(store.state.shoppingCar,()=>{
				 numArr.value = cloneDeep(store.state.shoppingCar)
				 let num = numArr.value.reduce((_c,item)=>{
					 if(item.isChack){
						 return _c + 1
					 }
					 return _c
				 },0)
				       uni.setTabBarBadge({
				         index: 2,
				         text: String(num), // 注意：text 的值必须是字符串，不能是数字
				       })
			},{immediate:true})
			onLoad(()=>uni.setNavigationBarTitle({
				title:'购物车'
			}))
			return{
				cartListData:computed(()=>store.state.shoppingCar),width:uni.getSystemInfoSync().windowWidth,changAttrChacked,sumChacked,addCarSomeNam,numArr,settlementCart,clearSomeAttr,checkedAll
			}
		}
	})
</script>

<style lang="scss">
.btm_bar{
	position: fixed;
	bottom: 0;
	left: 0;
	height: 100rpx;
	box-shadow: -5rpx -5rpx 10rpx #8F939C;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.btm_bar_left{
		width: 20%;
		align-items: center;
		display: flex;
		font-size: 25rpx;
	}
	.btm_bar_center{
		width: 30%;
		text{
			color:#DD524D ;
		}
	}
	.btm_bar_rgiht{
		width: 30%;
		height: 100%;
		background-color:#DD524D ;
		display: flex;
		color: white;
		justify-content: center;
		align-items: center;
	}
	
}
.nething{
	height: 500rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	color: #808080;
}
.address{
	height: 170rpx;
	background-color: red;
	padding: 0 10rpx ;
}
.cart_centerbox{
	height: 100rpx;
	padding: 0 10rpx ;
	border-bottom: 1px solid #DCDFE6;
	.lang_icon{
		height: 30%;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.cart_centerbox_main{
		height: 70%;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.cart_centerbox_main_icon{
			margin-right: 10rpx;
		}
	}
}
.cart_main{
	height: 200rpx;
	border-bottom: 1rpx solid #DCDFE6;
	display: flex;
	.cart_main_checked{
		height:100%;
		width: 10%;
	}
	.cart_main_img{
		height:100%;
		width: 25%;
	}
		
	.cart_main_context{
		font-size: 25rpx;
		height:100%;
		width: 65%;
		display: flex;
		padding: 0 10rpx;
		flex-direction: column;
		.cart_main_context_topper{
			padding-top:20rpx;
			height: 50%;
			width: 100%;
			display: block;
		}
		.cart_main_context_bottom{
			flex: 1;
			display: flex;
			width: 100%;
			align-items: center;
			justify-content: space-between;
			text{
				color: #DD524D;
				font-size: 35rpx;
			}
			.cart_main_context_bottom_number{
				display: flex;
				width: 40%;
				height: 70%;
				border: 1px solid #DCDFE6;
				.cart_num{
					display:flex;
					justify-content: center;
					align-items: center;
					height: 100%;
					width: 33.3%;
				}
				.cart_num_input{
					display:flex;
					text-align: center;
					width: 33.3%;
					height: 100%;
				}
			}
		}
	}
}
</style>
